<template>
  <div class="person">
    <h1>情况2:监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div> 
</template>

<script lang="ts" setup name="Person">
  import { ref,watch} from 'vue'
  // 数据
  let person = ref({name:'张三',age:18})
  // 方法
  function changeName(){
    person.value.name += '~'
  }
  function changeAge(){
    person.value.age += 1
  }
  function changePerson(){
    person.value = {name:'李四',age:20}
  }
  // 监视,情况1：监视【ref】定义的【对象类型】数据，监视的是对象的地址值；若想监视对象内部属性值的变化，需要手动开启深度监视
  // 改变属性的值时，不改变地址，所以当修改对象内部属性值时，监视的newValue,oldValue是相同的，都是newValue
  watch(person,(newValue,oldValue) => {
    console.log('person变化了',newValue,oldValue);
  },{deep:true})  
  // watch中第一个参数，watch的监视对象
  // watch中第二个参数，回调函数
  // watch中第三个参数，配置对象(deep,immediate...)
  
</script>

<style>
  .person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button{
    margin: 0 5px;
  }
  ul li{
    font-size: 20px;
  }
</style>